<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JavaScript：核心语法+DOM{针对页面操作}+BOM(针对浏览器)
		     学习主体：针对页面操作比较多-----DOM操作
			 JQuery操作DOM 理解：JQ框架改变页面内容效果
			 js基础就可以直接学习，了解函数使用
			 基础语法----事件源之后出现，事件源语法糖中
			 html()       作用：增加一个元素，覆盖原有html
			 val()        作用：针对input元素，实现修改文本框内容
			 text()       作用：生成文本内容
		 -->
		 <script src="js/jquery-1.11.0.min.js"></script>
	</head>
	<body>
		<!-- 鼠标点击按钮，然后，改变下面产生一行文本 -->
		<button>按钮</button>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, provident quos. Adipisci, voluptatem? Esse, expedita at. Porro aut dolorum obcaecati, excepturi aliquid animi distinctio labore a nostrum, reiciendis odio repellendus?</p>
		<div style="width: 200px; height: 200px; background: #000;"></div>
		<h3>lorem</h3>
		<input type="button" value="按钮2"/>
		<input type="text" value="输入框可以直接写文本"/>
		<script>
			$("button").click(function(){
				/* JQ操作DOM--html()函数使用*/ 
				$("p").html("<h1>JQ操作DOM-html函数使用</h1>");
			});
			/*练习：div 200*200 背景颜色：黑色  下面有一行文本 鼠标划过之后 
			下面内容修改：<h3>提示，修改为黄颜色 */ 
			$("div").mouseenter(function(){
				$("h3").html("<h3>黄颜色</h3>");
			})
			/* 练习：按钮  文本框       点击按钮，文本框增加一行文本*/ 
			$("input[type='button']").click(function(){
				//alert("jq选择器是否选中");
				$("input[type='text']").val("文本框内容修改")
			});
			/*利用jQuery操作DOM（页面效果）：1.元素内容操作 3个函数
			                               html()
										   val()
										   text()
			                               2.属性操作 4个函数
										   <p align="center">
										   attr()
										   removeAttr()
										   <input checked>
										   prop()
										   removeProp()
										  3.样式操作 4个函数
										   .demo{属性：属性值..}
										   addClass()
										   removeClass()
										   toggleClass()
										   hasClass()
										   4.元素样式属性表(5个函数)
										   css()
										   width和height
										   outerWidth和outerHeight
										   5.插入和删除操作 7个函数
										   append()和prepend()
										   after()和before()
										   remove()和empty()
										   replaceWith()
										   6.元素遍历操作 6个函数
										   JQ动画操作 7个函数
			*/ 
		</script>
		
	</body>
</html>